<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* UGCWasm (https://iclient.supermap.io/web/libs/ugcwasm/1.0.1/UGCWasmAll.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_ugcBuffer"></title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        background: #fff;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }
      #toolbar {
        position: absolute;
        top: 50px;
        right: 10px;
        width: 280px;
        text-align: center;
        z-index: 10000;
        border-radius: 4px;
      }
    </style>
  </head>

  <body>
    <div id="toolbar" class="panel panel-primary">
      <div class="panel-heading">
        <h5 class="panel-title text-center">缓冲区分析</h5>
      </div>
      <div class="panel-body content">
        <div class="panel">
          <div class="input-group">
            <span class="input-group-addon">缓冲区半径(度)</span>
            <input class="form-control" id="radius" type="number" value="2" />
          </div>
        </div>
        <input type="button" class="btn btn-default" value="分析" onclick="createBuffer()" />&nbsp;
        <input type="button" class="btn btn-default" value="移除" onclick="clearLayer()" />
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100%"></div>
    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
    <script type="text/javascript" include="ugcwasm" src="../../dist/ol/include-ol.js"></script>
    <script>
      var map, bufferLayer, point;
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var url = host + '/iserver/services/map-world/rest/maps/World';
      ol.supermap
        .initMap(url, {
          viewOptions: {
            center: [120, 30],
            zoom: 6
          }
        })
        .then((res) => {
          map = res.map;
          addMarker();
        });

      function addMarker() {
        point = new ol.geom.Point([120, 30]);
        var iconStyle = new ol.style.Style({
          image: new ol.style.Icon({
            src: '../img/markerbig_select.png'
          })
        });
        var feature = new ol.Feature(point);
        feature.setStyle(iconStyle);
        var pointSource = new ol.source.Vector({
          features: [feature],
          wrapX: false
        });
        var vectorLayer = new ol.layer.Vector({
          source: pointSource
        });
        map.addLayer(vectorLayer);
      }

      function createBuffer() {
        clearLayer();
        var radius = parseFloat(document.getElementById('radius').value);
        var geometryAnalysis = new ol.supermap.GeometryAnalysis();
        var res = geometryAnalysis.buffer(
          {
            type: 'Feature',
            geometry: {
              coordinates: [120, 30],
              type: 'Point'
            }
          },
          radius
        );
        polygon = new ol.geom.Polygon(res.geometry.coordinates);
        var polygonSource = new ol.source.Vector({
          features: [new ol.Feature(polygon)],
          wrapX: false
        });
        bufferLayer = new ol.layer.Vector({
          source: polygonSource,
          style: new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'blue',
              width: 3
            }),
            fill: new ol.style.Fill({
              color: 'rgba(0, 0, 255, 0.1)'
            })
          })
        });
        map.addLayer(bufferLayer);
      }

      function clearLayer() {
        map.removeLayer(bufferLayer);
      }
    </script>
  </body>
</html>
